@wordpress/dom-ready

What is @wordpress/dom-ready?

@wordpress/dom-ready is a utility package that provides a simple way to execute JavaScript code when the DOM is fully loaded. It is particularly useful in WordPress development for ensuring that scripts run only after the DOM is ready, which is a common requirement for manipulating DOM elements.

What are @wordpress/dom-ready's main functionalities?

Execute code when DOM is ready

This feature allows you to execute a callback function once the DOM is fully loaded. It is similar to jQuery's $(document).ready() method. The code sample demonstrates how to use the domReady function to log a message to the console when the DOM is ready.

const domReady = require('@wordpress/dom-ready');
domReady(function() {
  console.log('DOM is fully loaded');
  // Your code here
});

Other packages similar to @wordpress/dom-ready

domready

The 'domready' package is a minimalistic library that provides similar functionality to @wordpress/dom-ready. It allows you to execute a function when the DOM is ready. It is lightweight and has no dependencies, making it a good choice for projects that do not require the additional features of larger libraries like jQuery.

jquery

jQuery is a comprehensive JavaScript library that includes a wide range of features, including DOM manipulation, event handling, and AJAX. It provides a $(document).ready() method that serves the same purpose as @wordpress/dom-ready. However, jQuery is much larger in size and includes many more features beyond just DOM readiness.

README

DOM Ready

Execute callback after the DOM is loaded.

Installation

Install the module

npm install @wordpress/dom-ready --save

This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

API

default

Specify a function to execute when the DOM is fully loaded.

Usage

import domReady from '@wordpress/dom-ready';

domReady( function () {
	//do something after DOM loads.
} );

Parameters

• callback Callback: A function to execute after the DOM is ready.

Returns

• void:

Browser support

See https://make.wordpress.org/core/handbook/best-practices/browser-support/

Contributing to this package

This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project's main contributor guide.